<template>
	<view class="culture-page-box">
		<uv-sticky offset-top="0" bgColor="#fff">
			<view class="culture-page">
				<view class="search-box">
					<uv-search placeholder="请输入搜索内容" v-model="keyword" animation="false"></uv-search>
				</view>
				<view class="">
					<uv-tabs :list="list" @click="click" class="custom-tabs" inactive-style="color:'#666666'"
						lineColor="#daa03d" :activeStyle="{ color: '#daa03d'} " line-height="1"></uv-tabs>
				</view>
			</view>

			<view class="lineBg"></view>
		</uv-sticky>
		<view class="">
			<view class="culturelist" v-for="item in 20" @click="handleTo">
				<view class="culture-left">
					<view class="culture-title color-333 size-16 size-bold">
						何为玉文化?对中国玉文化的内涵探析，古人为何偏爱玉?何为玉文化?对中国玉文化的内涵探析，古人为何偏爱玉?</view>
					<view class="">
						<uv-rate :count="1" :value="index + 1" inactiveColor="#daa03d" activeColor="#daa03d" size="20"
							style="padding-left: 0px;"></uv-rate>
					</view>
					<view class="culture-Time">
						<view class="Time-item">
							<view class="">2025/06/16</view>
							<view class="Iitm-line"></view>
							<view class="">252人已阅读</view>
						</view>
						<view class="share">
							<image src="../../static/icon/icon-fx.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="culture-right border-10">
					<image src="../../static/test/test_1.png" mode=""></image>
				</view>
			</view>
		</view>
		<uv-load-more :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
			:nomore-text="nomoreText" />

	</view>

</template>

<script>
	export default {
		data() {
			return {
				keyword: '水调歌头',
				list: [{
					name: '中华玉文化',
				}, {
					name: '平台介绍',
				}, {
					name: '文化传承'
				}, ],
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了'
			};

		},
		methods: {
			click(item) {
				console.log('item', item);
			},
			handleTo(){
				uni.navigateTo({
					url:"/pages/culture/cultureDetails/cultureDetails"
				})
			}
		}

	}
</script>

<style lang="less">
	.culture-page-box{
			
			padding-bottom: calc(60px + env(safe-area-inset-bottom));
			
	}
	.culture-page {
		padding: 30rpx 30rpx 0rpx 30rpx;
		box-sizing: border-box;

		.search-box {
			margin-bottom: 20rpx;
		}

	}

	.lineBg {
		width: 100%;
		height: 20rpx;
		margin-bottom: 1rpx;
		background-color: #f6f6f8;
	}

	.culturelist {
		width: 90%;
		padding: 40rpx 0;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		border-bottom: 0.5px solid #f2f2f2;

		.culture-left {
			width: 70%;
			display: flex;
			flex-direction: column;
			gap: 10rpx;

			.culture-title {
				width: 100%;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 1.5;
			}

			.culture-Time {
				display: flex;
				justify-content: space-between;

				.Time-item {
					display: flex;
					align-items: center;
					color: #32b9b4;
					font-size: 14px;

					.Iitm-line {
						width: 2px;
						height: 80%;
						margin: 0rpx 20rpx;
						background-color: #7d7d7d;
					}

				}

				.share {
					width: 35rpx;
					height: 35rpx;

					image {
						width: 100%;
						height: 100%;
					}

				}
			}
		}


		.culture-right {
			width: 25%;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}
</style>